"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import type { Product } from "@/types"
import { Plus, Minus } from "lucide-react"
import { useState } from "react"

interface ProductCardProps {
  product: Product
  onAddToCart: (product: Product, quantity: number) => void
  onUpdateQuantity: (id: string, quantity: number) => void
  cartQuantity?: number
}

export function ProductCard({ product, onAddToCart, onUpdateQuantity, cartQuantity = 0 }: ProductCardProps) {
  const [quantity, setQuantity] = useState(1)

  const handleAddToCart = () => {
    onAddToCart(product, quantity)
    setQuantity(1)
  }

  const incrementQuantity = () => {
    setQuantity((prev) => prev + 1)
  }

  const decrementQuantity = () => {
    setQuantity((prev) => Math.max(1, prev - 1))
  }

  const handleCartIncrement = () => {
    onUpdateQuantity(product.id, cartQuantity + 1)
  }

  const handleCartDecrement = () => {
    onUpdateQuantity(product.id, cartQuantity - 1)
  }

  return (
    <Card className="group hover:shadow-lg transition-all duration-200 border-border/50 hover:border-border">
      <CardContent className="p-3">
        <div className="flex gap-3">
          {/* 商品图片 */}
          <div className="w-20 h-20 relative rounded-lg overflow-hidden bg-muted flex-shrink-0">
            <Image
              src={product.image || "/placeholder.svg"}
              alt={product.name}
              fill
              className="object-cover group-hover:scale-105 transition-transform duration-200"
              sizes="80px"
            />
          </div>

          {/* 商品信息 */}
          <div className="flex-1 min-w-0">
            <h3 className="font-medium text-sm leading-tight text-balance mb-1">{product.name}</h3>

            {product.description && (
              <p className="text-xs text-muted-foreground line-clamp-2 mb-2">{product.description}</p>
            )}

            <div className="flex items-center justify-between">
              <span className="font-semibold text-primary">¥{product.price.toFixed(1)}</span>

              {cartQuantity > 0 ? (
                // 已在购物车中，显示数量控制
                <div className="flex items-center gap-2">
                  <div className="flex items-center border border-border rounded-lg">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-7 w-7 p-0 hover:bg-muted"
                      onClick={handleCartDecrement}
                    >
                      <Minus className="h-3 w-3" />
                    </Button>

                    <span className="w-8 text-center text-sm font-medium">{cartQuantity}</span>

                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-7 w-7 p-0 hover:bg-muted"
                      onClick={handleCartIncrement}
                    >
                      <Plus className="h-3 w-3" />
                    </Button>
                  </div>
                </div>
              ) : (
                // 未在购物车中，显示添加按钮
                <div className="flex items-center gap-2">
                  <div className="flex items-center border border-border rounded-lg">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-7 w-7 p-0 hover:bg-muted"
                      onClick={decrementQuantity}
                    >
                      <Minus className="h-3 w-3" />
                    </Button>

                    <span className="w-8 text-center text-sm font-medium">{quantity}</span>

                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-7 w-7 p-0 hover:bg-muted"
                      onClick={incrementQuantity}
                    >
                      <Plus className="h-3 w-3" />
                    </Button>
                  </div>

                  <Button size="sm" className="h-7 px-3 text-xs font-medium" onClick={handleAddToCart}>
                    加入
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
